<template>
  <Page>
    <template v-slot:header>
      <h2>
        <span class="icon iconfont">&#xe6b4;</span>
        <span>{{ $t("system.script") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <p>{{ $t("system.script_table_description") }}</p>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
      >
        <create-script
          v-if="type === 'create' || type ==='update'"
          :type="type"
          :row_id="row_id"
          @click="handleCreateDisplay"
        ></create-script>
        <run-script
          v-else-if="type==='run'"
          :row_id="row_id"
          :content="content"
          :scriptFrom="scriptFrom"
          @click="handleRunDisplay"
        ></run-script>
      </el-dialog>
      <ky-table
        :getData="getScripts"
        ref="table"
        :search_criteria="search_criteria"
        :search_data="search_data"
      >
        <template v-slot:table-action>
          <authorization-button @click="handleCreate" class="kylin-item-button" name="script:create">
            {{ $t("system.create_script") }}
          </authorization-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="name" :label="$t('system.script_name')">
          </el-table-column>
          <el-table-column prop="userName" :label="$t('create_user')">
          </el-table-column>
          <el-table-column prop="createdAt" :label="$t('create_time')">
          </el-table-column>
          <el-table-column
            prop="updatedAt"
            :label="$t('configure.change_time')"
          >
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <authorization-button
                @click.native.prevent="handleEdit(scope.row)"
                type="text"
                size="medium"
                name="script:create"
              >
                {{ $t("edit") }}
              </authorization-button>
              <authorization-button
                @click.native.prevent="handleRun(scope.row)"
                type="text"
                size="medium"
                name="script:run"
              >
                {{ $t("run") }}
              </authorization-button>
              <el-popconfirm
                :title="$t('system.script_delete_confirm')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button type="text" slot="reference" size="medium" class="kylin-delete" name="script:delete">
                  {{ $t("delete") }}
                </authorization-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column :label="$t('system.execution_record')">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleLog(scope.row)"
                type="text"
                size="medium"
              >
                {{ $t("log.log") }}
              </el-button>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </Page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import createScript from "./form/createScript.vue";
import runScript from "./form/runScript.vue";
import { getScripts, removeScript } from "@/api/script";
import AuthorizationButton from "@/components/AuthorizationButton";
export default {
  name: "script",
  components: {
    Page,
    kyTable,
    createScript,
    runScript,
    AuthorizationButton
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      display: false,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
      },
      row_id: "",
      type: "",
      title: "",
      isRun: false,
      scriptFrom: null,
      content: "",
      search_data: {
        name: {
          name: "system.script_name",
          type: "text",
        },
        username: {
          name: "create_user",
          type: "select",
          items: [{ key: "admin", name: "admin" }],
        },
        createdAt: {
          name: "create_time",
          type: "date",
        },
        updatedAt: {
          name: "configure.change_time",
          type: "date",
        },
      },
    };
  },
  methods: {
    getScripts,
    handleEdit(row) {
      this.display = true;
      this.type = "update";
      this.row_id = row.id;
      this.title = this.$t("system.update_script");
    },
    handleRun(row) {
      this.display = true;
      this.title = this.$t("system.run_script");
      this.type = "run"
      if (row) {
          this.row_id = row.id;
          this.content = row.content;
      }
    },
    handleDelete(row) {
      removeScript({ id: row.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleLog(row) {
        this.$router.push({
            name: "log",
            query: {search: row.name}
        })
    },
    handleCreateDisplay(form) {
      if (form == "success") {
        this.display = false;
        this.scriptFrom = null;
        this.type = "";
        this.title = "";
        this.$refs.table.handleSearch();
      } else if (
        Object.prototype.toString.call(form).slice(8, -1) == "Object"
      ) {
        this.scriptFrom = form;
        this.title = this.$t("system.run_script");
        this.type = "run"
      } else {
        this.display = false;
        this.scriptFrom = null;
        this.type = "";
        this.title = "";
      }
    },
    handleCreate() {
      this.display = true;
      this.type = "create";
      this.title = this.$t("system.create_script");
    },
    handleRunDisplay() {
      this.display = false;
      this.scriptFrom = null;
      this.type = "";
      this.title = "";
    },
    handleClose() {
      this.display = false;
      this.scriptFrom = null;
      this.type = "";
      this.title = "";
    },
  },
};
</script>

<style>
</style>